<template>
  <div class="order">
    <table class="order-table">
      <thead>
      <td colspan="7">
        <!--          <el-checkbox class="el-checkbox"></el-checkbox>-->
        {{ "\xa0" + order.createdTime.split(' ').splice(0, 1) + "\xa0\xa0\xa0\xa0\xa0" + '订单号：' + order.outTradeNo }}
      </td>
      </thead>
      <tbody>
      <tr>
        <td width="692px">
          <div v-for="(o,i) in order.details" :key="i">
            <router-link class="list-group-item" :to="`/purchasePage?curBookId=${o.bookId}`">
              <img class="bookImg" :src="$store.state.baseImgUrl+o.book.img">
              <span class="name">{{ o.name }}</span>
            </router-link>
            <span class="price">￥{{ o.price |rounding }}元</span>
            <span class="count">{{ o.count }}</span>
          </div>
        </td>
        <td class="total">
          ￥{{ total |rounding }}元
        </td>
        <td class="state">
          {{ states }}<br>
          <button class="details b" @click="toDetails">订单详情</button>
          <br>
          <span class="details" v-if="this.order.status==5">买家已评</span>
        </td>
        <td class="opreate">
          <el-button class="btn" v-if="this.order.status!=2" @click="handleClick()">{{ opreates }}</el-button>
          <br>
          <el-button class="btn bt" v-if="this.order.status==1" @click="toPay">去支付</el-button>
          <el-button class="btn bt" v-if="this.order.status==4||this.order.status==5" @click="toDelete">删除订单</el-button>
        </td>
      </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  name: "Order.vue",
  data() {
    return {
      orderId: '',
    }
  },
  props: {
    order: Object,
  },
  computed: {
    total() {
      var total = 0;
      this.order.details.forEach(item => {
        total += item.price * item.count
      });
      return total;
    },
    states() {
      var state = ''
      if (this.order.status == 0) {
        state = '交易关闭'
      } else if (this.order.status == 1) {
        state = '等待买家付款'
      } else if (this.order.status == 2) {
        state = '等待卖家发货'
      } else if (this.order.status == 3) {
        state = '物流运输中'
      } else if (this.order.status == 4) {
        state = '交易成功'
      } else if (this.order.status == 5) {
        state = '交易完成'
      }
      return state
    },
    opreates() {
      var opreate = ''
      if (this.order.status == 0) {
        opreate = '删除订单'
      } else if (this.order.status == 1) {
        opreate = '取消订单'
      } else if (this.order.status == 3) {
        opreate = '确认收货'
      } else if (this.order.status == 4) {
        opreate = '去评论'
      } else if (this.order.status == 5) {
        opreate = '查看评论'
      }
      return opreate
    },
  },
  methods: {
    handleClick() {
      //取消订单
      if (this.opreates == '取消订单') {
        this.getRequest('/oms/bookOrder/cancel/' + this.order.id).then(() => {
          this.$message.success("取消成功")
          this.$router.go(0)
        })
      }
      //确认收获
      if (this.opreates == '确认收货') {
        this.getRequest('/oms/bookOrder/over/' + this.order.id).then(() => {
          this.$message.success("确认成功")
          this.$router.go(0)
        })
      }
      //删除订单
      if (this.opreates == '删除订单') {
        this.getRequest('/oms/bookOrder/delete/' + this.order.id).then(() => {
          this.$message.success("删除成功")
          this.$router.go(0)
        })
      }
      //去评论
      if (this.opreates == '去评论') {
        this.$router.push({
          path: '/toComment',
          query: {
            oid: this.order.id
          }
        })
      }
      //查看评论
      if (this.opreates == '查看评论') {
        this.$router.push({
          path: '/toComment',
          query: {
            oid: this.order.id
          }
        })
      }
    },
    //去支付
    toPay() {
      this.$router.push({
        path: '/detailToOrder',
        query: {
          from: 'buy',
          oid: this.order.id
        }
      })
    },
    //删除订单
    toDelete() {
      this.getRequest('/oms/bookOrder/delete/' + this.order.id).then(() => {
        this.$message.success("删除成功")
        this.$router.go(0)
      })
    },
    //查看订单详情
    toDetails() {
      this.$router.push({
        path: '/orderDetail',
        query: {
          oid: this.order.id
        }
      })
    }
  },
  created() {
    console.log(this.order)
  }
}
</script>

<style scoped>
.order {
  margin-bottom: 40px;
}

.order-table {
  width: 100%;
  border: 1px solid #dcd9d9;
  line-height: 40px;
  background: white;
}

.order-table thead {
  line-height: 50px;
  height: 50px;
  background: #faf1f1;
  font: 400 19px 华文黑体;
  color: #524e4e;
}

.order-table thead td {
  padding-left: 24px;
}

/*.el-checkbox{*/
/*  position: relative;*/
/*  top:-3px;*/
/*}*/
.order-table tbody {
  font: 400 16px 华文黑体;
  color: #3b3939;
  text-align: center;
}

.bookImg {
  padding: 12px 5px 6px 5px;
  height: 120px;
  width: 120px;
}

.order-table tbody div {
  width: 687px;
  border-bottom: 1px solid gainsboro;
  border-right: 1px solid gainsboro;
  padding-top: 5px;
  padding-bottom: 5px;
}

.order-table tbody div:last-child {
  border-bottom: none;
}

.order-table tbody div span {
  display: inline-block;
  position: relative;
  top: -63px;
  margin-right: 5px;
}

.name {
  width: 370px;
  text-align: left;
}

.price {
  width: 85px;
}

.count {
  width: 85px;
}

.total {
  font-size: 18px;
  font-weight: bold;
  padding-right: 5px;
}

.total, .state {
  width: 148px;
  border-right: 1px solid gainsboro;
}

.total, .state, .opreate {
  vertical-align: top;
  padding-top: 23px;
}

.details {
  font: 400 16px 华文黑体;
  display: inline-block;
  padding-top: 20px;
  border: none;
  background: none;
}

.b:hover {
  cursor: pointer;
  text-decoration: underline;
  color: #535252;
  text-shadow: 2px 2px 3px #e8e7e7;
}

.el-button {
  background: #fd9c9c;
  font: bolder 16px 华文黑体;
  color: white;
  border: 1px solid #f8c9c9;
}

.el-button:hover {
  background: #fa7676;
}

.btn {
  width: 99px;
  font: 400 15px 华文黑体;
}

.bt {
  margin-top: 12px;
  margin-bottom: 17px;
}
</style>